<template>
    <div class="user-center">
        <VipHeader class="header" v-if="user_detail_data.vip_type!=='普通会员'"/>
        <Header class="header" v-else/>
        <div class="common_container">
            <div class="content-body">
                <div class="content-left">
                    <div class="card-image">
                        <div class="user-icon">
                            <img :src="user_data.icon" alt="">
                            <div class="vip-icon">
                                <img src="../assets/img/vip0.png" alt=""
                                     v-if="user_detail_data.vip_type==='普通会员'">
                                <img src="../assets/img/vip1.png" alt=""
                                     v-else-if="user_detail_data.vip_type==='黄金会员'">
                                <img src="../assets/img/vip2.png" alt="" v-else>
                            </div>
                        </div>
                        <div class="user_nick_name">
                            {{user_data.nick_name}}
                        </div>
                        <div v-if="user_detail_data.vip_type==='普通会员'">
                            <div class="tip-content">
                                开通会员尊享超值特权
                            </div>
                            <div class="tip-content">
                                <span class="vip-btn mybtn">开通会员</span>
                            </div>
                        </div>
                        <div v-else-if="user_detail_data.vip_type==='黄金会员'">
                            <div class="tip-content font-color">
                                尊敬的黄金会员，您好！
                            </div>
                        </div>
                        <div v-else>
                            <div class="tip-content font-color">
                                尊贵的至尊会员，您好！
                            </div>
                        </div>

                    </div>
                    <div class="card-menu" :class="current_page === '/' ? 'select-menu':''">
                        <span class="mybtn" @click="current_page='/'">个人中心</span>
                    </div>
                    <div class="card-menu" :class="current_page === 'record' ? 'select-menu':''">
                        <span class="mybtn" @click="current_page='record'">播放记录</span>
                    </div>
                </div>
                <div class="content-right">
                    <VideoRecord v-if="current_page === 'record'"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import VipHeader from "../components/VipHeader"
    import Header from "../components/Header"

    import VideoRecord from "../components/VideoRecord"

    export default {
        name: "UserCenter",
        data() {
            return {
                current_page : "/",  // 当前页面
                // 用户数据
                user_data: this.$cookies.get("user_info"),
                user_detail_data: [],
            }
        },
        components: {
            VipHeader,
            Header,
            VideoRecord
        },
        methods: {
            // 获取个人中心的传递的参数
            get_center_page(){
                if(this.$route.params.center){
                    this.current_page = this.$route.params.center
                }
                else{
                    this.current_page = "/"
                }
            },
            // 获取用户信息
            get_user_info() {
                if (!this.user_data && !this.$cookies.get("token")) {
                    let _this = this
                    _this.$alert("没有登陆，请先登陆", "警告", {
                        callback() {
                            _this.$router.push("/")
                        }
                    });
                }
                else{
                    this.get_user_detail_info();
                }
            },
            // 获取用户详细信息
            get_user_detail_info() {
                // 获取信息
                this.$axios({
                    url: `${this.$settings.base_url}/user/detail`,
                    method: "post",
                    headers: {
                        "AUTHORIZATION": `JWT ${this.$cookies.get("token")}`   // 请求token
                    }
                }).then(response => {
                    this.user_detail_data = response.data;
                    // 更新会员类型
                    this.user_data.vip_type = this.user_detail_data.vip_type;
                    this.$cookies.set("user_info", this.user_data);
                    // console.log(this.user_detail_data)
                }).catch(() => {
                    let _this = this
                    _this.$alert("获取个人信息有误，请联系客服工作人员", "未知错误", {
                        callback() {
                            _this.$router.push("/")
                        }
                    });
                })
            },
        },
        created() {
            this.get_center_page();
            this.get_user_info();
        }
    }
</script>

<style scoped>
    .user-center {
        width: 100%;
    }

    .header {
        background: white;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
        position: relative !important;
    }

    .common_container {
        margin: 0 130px;
    }

    .content-body {
        margin: 50px 0;
    }

    .content-left {
        display: inline-block;
        height: 100%;
        width: 18%;
    }

    .content-right {
        display: inline-block;
        float: right;
        height: 100%;
        width: 80%;
    }

    .card-image {
        margin: 0 auto;
        padding: 30px 0;
        background: #fafafa;
    }

    .user-icon {
        margin: 0 auto;
        width: 100px;
        height: 100px;
        border: 3px solid white;
        border-radius: 50px;
        position: relative;
    }

    .vip-icon {
        position: absolute;
        top: -10px;
        right: 3px;
        width: 18px;
        height: 18px;
    }

    .user_nick_name {
        width: 100px;
        margin: 10px auto;
        padding-left: 8px;

    }

    .tip-content {
        text-align: center;
        margin: 15px auto 0;
    }

    .vip-btn {
        padding: 8px 15px;
        border-radius: 20px;
        background: #dab176;
    }

    .mybtn:hover {
        cursor: pointer;
        color: #0d9bff;
    }

    .card-menu {
        margin: 5px 0;
        background: #fafafa;
        padding: 13px 0;
        text-align: center;
    }

    .select-menu {
        border-left: 5px solid #0d9bff;
        color: #0d9bff;
    }

    .font-color {
        color: #dab176;
    }

    img {
        width: 100%;
        height: 100%;
    }


</style>